<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>发红包</title>
	<link rel="stylesheet" href="../css/api.css">
    <style>
        body{height:100vh;background:#f1f1f1;font-size:14px;position: relative;}
        .border1px:after{position:absolute;top:0;left:0;display:block;width:200%;height:200%;content:'';-webkit-transform:scale(.5);transform:scale(.5);-webkit-transform-origin:top left;transform-origin:top left}
        .container{padding:0 10px}
        /* 页眉 */
        .header{display:-webkit-box;display:box;display:-webkit-flex;display:flex;background:0 0;-webkit-box-pack:space-between;box-pack:space-between;-webkit-justify-content:space-between;justify-content:space-between}
        .header:after{display:none}
        .header_title{color:#000;font-weight:600;font-size:18px}
        .header_cancel{width:44px}
        .header_more{width:44px}
        .header_more>span{width:5px;height:5px;-webkit-border-radius:50%;border-radius:50%;background:#000}
        /* 表单 */
        .red-packet-price{display:-webkit-box;display:box;display:-webkit-flex;display:flex;padding:15px;-webkit-border-radius:4px;border-radius:4px;background:#fff}
        .red-packet-price>input{padding-right:10px;color:#bbb;text-align:right;font-size:16px;-webkit-box-flex:1;box-flex:1;-webkit-flex:1;flex:1}
        .red-packet-container{margin-top:30px}
        .red-packet-desc{-webkit-box-sizing:border-box;box-sizing:border-box;margin-top:20px;padding:10px;width:100%;height:80px;-webkit-border-radius:4px;border-radius:4px;background:#fff;color:#bbb;font-size:16px}
        .price-preview{margin:20px 0;text-align:center;font-weight:600;font-size:40px}
        .rmb-sign{font-size:30px}
        .pay{display:block;margin:0 auto;padding:20px 0;width:80%;border-radius:4px;background:#e9c1b6;color:#fff;font-size:16px}
        .tips{margin-top:25vh;width:100%;color:#aaa;text-align:center}
        /* 支付弹框 */
        .pay-container-mask{position:fixed;top:0;left:0;display:none;opacity:0;width:100vw;height:100vh;background:rgba(0,0,0,.5);transition:.5s}
        .pay-container-mask--act{display:block;opacity:1}
        .pay-popUp{overflow: hidden;position:absolute;top:50%;left:50%;width:80%;-webkit-border-radius:4px;border-radius:4px;background:#fff;text-align:center;transition:.3s;-webkit-transform:translate(-50%,100vh);transform:translate(-50%,100vh)}
        .pay-popUp:after {border:1px solid #ccc;}
        .pay-popUp--act{-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}
        .pay-popUp_header{position:relative;margin-bottom:10px;height:44px;text-align:center;line-height:44px}
        .pay-popUp_header:after{border-bottom:1px solid #1aad19}
        .pay-popUp_close{position:absolute;left:0;z-index:3;width:44px;height:100%;color:#ccc;font-size:16px}
        .pay-popUp .price-preview{position:relative;margin:0;padding-bottom:10px}
        .pay-popUp .price-preview:after{border-bottom:1px solid #ccc}
        .pay-popUp_pay-mode{position:relative;display:-webkit-box;display:box;display:-webkit-flex;display:flex;padding:10px 0;-webkit-box-pack:space-between;box-pack:space-between;-webkit-justify-content:space-between;justify-content:space-between;-webkit-box-align:center;box-align:center;-webkit-align-items:center;align-items:center}
        .pay-mode-info{display:-webkit-box;display:box;display:-webkit-flex;display:flex;-webkit-box-align:center;box-align:center;-webkit-align-items:center;align-items:center}
        .pay-mode-info>img{width:40px}
        .icon-right{width:20px}
        .pay-popUp_pay-mode:after{border-bottom:1px solid #ccc}
        .confirm-pay{-webkit-box-sizing:border-box;box-sizing:border-box;margin:20px 0;padding:15px;width:100%;border-radius:4px;background:#1aad19;color:#fff;text-align:center;position:relative;z-index:2;}
    </style>
</head>

<body>
    <header class="header">
        <div class="header_cancel">取消</div>
        <p class="header_title">发红包</p>
        <div class="header_more">
            <span></span>
            <span></span>
            <span></span>
        </div>
    </header>
    <form class="container red-packet-container" action="#" method="post">
        <label class="red-packet-price">
            <span>金额</span>
            <input type="number" placeholder="0.00" id="price">
            <span>元</span>
        </label>
        <textarea class="red-packet-desc" id="desc">恭喜发财,大吉大利</textarea>
        <p class="price-preview" id="pricePreview">
            <span class="rmb-sign">￥</span>0.00 </p>
        <button class="pay" type="button" id="pay" onclick="showPopUp()" tapmode>塞 钱 进 红 包</button>
    </form>
    <p class="tips">可直接使用收到的零钱发红包</p>

    <!-- 支付弹框 -->
    <div class="pay-container-mask" id="mask">
        <div class="pay-popUp border1px" id="payPopup">
            <div class="pay-popUp_header border1px">
                <button class="pay-popUp_close" id="close" type="button" onclick="closePopup()" tapmode>X</button>
                <p>支付</p>
            </div>
            <div class="container">
                <p>红包</p>
                <p class="price-preview border1px">
                        <span class="rmb-sign">￥</span>0.00 </p>
                <div class="pay-popUp_pay-mode border1px">
                    <div class="pay-mode-info">
                        <img src="../icon/zfbpay.png">
                        <span>支付宝</span>
                    </div>
                    <img class="icon-right" src="../icon/right.png">
                </div>
                <div class="confirm-pay" tapmode onclick="confirmPay()">确认支付</div>
            </div>
        </div>
    </div>
    <script src="https://cdn.bootcss.com/zepto/1.2.0/zepto.js"></script>
    <script>
        var isSuccess = false,
            priceText = '0.00',
            priveValue = null;

        // 金额输入框检查
        $('#price').on('input', function () {
            priceText = $(this).val();
            priceValue = $(this).val();

            // 不为空
            if (priceValue === '' || Number(priceValue) === 0) {
                isSuccess = false;
            } else {
                isSuccess = true;
            }
            if (isSuccess) {
                $('#pay').css('background', '#ff4949');
            } else {
                $('#pay').css('background', '#e9c1b6');
            }

            // 1.222 -> 1.22
            if (/\./g.test(priceValue)) {
              priceText = priceValue.slice(0,priceValue.indexOf('.'))+priceValue.slice(priceValue.indexOf('.'),priceValue.indexOf('.')+3);
            }
            if (/^0/.test(priceValue) && !/\./.test(priceValue)) { // 001->1
                 priceText = /[^0]+/g.exec(priceValue) ? /[^0]+/g.exec(priceValue)[0] : 0.00;
            }
            // 00.1 -> 0.1, 001.1->1.1 0.1234->0.12
            if (/^0{1,}/g.test(priceValue) && /\./.test(priceValue)) {
                if (priceValue.slice(0,priceValue.indexOf('.')).match(/[^0]/g)) {
                    priceText = priceValue.slice(priceValue.search(/[^0]/g),priceValue.indexOf('.')) + '.'+priceValue.slice(priceValue.indexOf('.')+1,priceValue.indexOf('.')+3);
                } else {
                    priceText = '0.'+priceValue.slice(priceValue.indexOf('.')+1,priceValue.indexOf('.')+3);
                }
            }
            priceText = priceText?priceText:'0.00';
            $('.price-preview').html('<span class="rmb-sign">￥</span>'+priceText+'</p>')
        });
        // 限制字数
        $('#desc').on('input',function() {
            if ($(this).val().length >= 50) {
              $(this).val($(this).val().slice(0,50));
            }
        });
        function closePopup() {
            $('#mask').css('opacity',0);
            setTimeout(function() {
              $('#mask').css('display','none');
            },100)
            $('#mask').removeClass('pay-container-mask--act');
            $('#payPopup').removeClass('pay-popUp--act');
        }
        function showPopUp() {
            if (isSuccess) {
                $('#mask').css('display','block');
                setTimeout(function() {
                  $('#mask').css('opacity',1);
                  $('#payPopup').addClass('pay-popUp--act');
                },100)
            }

        }

        // 格式化文本
        // @param{String}text, 文本
        // @return{String}返回处理后的文本
        function format(text) {
           text = text.split('');
           while (text.indexOf('<') !== -1) {
             text[text.indexOf('<')] = '&lt;';
           }
           while (text.indexOf('>') !== -1) {
             text[text.indexOf('>')] = '&gt;;';
           }
           text = text.join('');
           text = text.trim();
           return text;
        }
        function confirmPay() {
            var desc = format($('#desc').val()),
                price = Number.parseFloat(priceText);
            console.log(price);

        }
    </script>
</body>

</html>
